<template>
  <div class="Document">
    <Table :loading="loading" :form="form" :table="table" @current="current" @selection="selection" @row="row">
      <template #form>
        <el-form-item label="文章标题">
          <el-input v-model="form.title" @keyup.enter.native="Search" clearable></el-input>
          <!-- <el-autocomplete
            class="inline-input"
            v-model="form.title"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            @select="handleSelect"
          ></el-autocomplete> -->
        </el-form-item>
        <!-- <el-form-item label="分类">
          <el-select v-model="form.classify" @change="changeClassify('form', '_id')">
            <el-option value="" label="全部"></el-option>
            <el-option v-for="item in classify" :key="item._id" :value="item._id" :label="item.title"></el-option>
          </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="标签">
          <el-select v-model="form.tag">
            <el-option :value="null" label="全部"></el-option>
            <el-option v-for="item in tag" :key="item._id" :value="item._id" :label="item.title"></el-option>
          </el-select>
        </el-form-item> -->

        <!-- <el-form-item label="时间">
          <el-date-picker
            v-model="form.Time"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="timeChange"
          >
          </el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="Search">查询</el-button>
          <el-button type="primary" @click="dialog = true">添加</el-button>
        </el-form-item>
      </template>
      <template #table>
        <el-table-column type="selection" width="55" align="center" header-align="center"> </el-table-column>
        <el-table-column prop="title" label="标题" align="center" header-align="center"> </el-table-column>
        <el-table-column prop="classify.title" label="分类" width="120" align="center" header-align="center"> </el-table-column>
        <el-table-column label="标签" align="center" header-align="center">
          <template slot-scope="scope">
            <el-tag v-for="item in scope.row.tag" :key="item._id">{{ item.title }}</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="body" label="内容" align="center" header-align="center"> </el-table-column> -->
        <el-table-column prop="createdAt1" label="创建时间" width="150" align="center" header-align="center"> </el-table-column>
        <el-table-column label="操作" align="center" width="150" header-align="center">
          <template slot-scope="scope">
            <el-button class="mr-10" type="primary" @click="rowEdit(scope.row)">编辑</el-button>
            <el-popconfirm icon="el-icon-info" iconColor="red" title="确定删除吗？" @confirm="rowDelete(scope.row._id)">
              <el-button type="danger" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </template>
    </Table>
    <el-dialog width="80%" :title="dialogForm._id ? '编辑' : '新增'" @close="dialogClose" :visible.sync="dialog">
      <DocDialog :form="dialogForm" @success="dialogSub"></DocDialog>
    </el-dialog>
  </div>
</template>
<script>
import DocDialog from "@/components/DocDialog";
import { mapState } from "vuex";

export default {
  name: "Document",
  components: { DocDialog },
  computed: { ...mapState(["classify"]) },
  data() {
    return {
      loading: false,
      dialog: false,
      form: {
        title: "",
        classify: "",
        tag: null,
        Time: [],
        PageIndex: 1,
        PageSize: 100,
        Count: null,
      },
      table: [],
      tableLabel: [
        { value: "title", label: "标题" },
        { value: "classify", label: "分类" },
        { value: "tag", label: "标签" },
        { value: "body", label: "内容" },
        { value: "createdAt1", label: "创建时间" },
      ],
      dialogForm: { tag: [] },
      tag: [],
    };
  },
  methods: {
    getList() {
      this.loading = true;
      this.$api.get("/Document", { params: this.form }).then(({ data }) => {
        if (data.Code == 500) this.$message.error(data.Msg);
        else {
          let { PageIndex, PageSize, Count, List } = data;

          this.form.PageIndex = PageIndex;
          this.form.PageSize = PageSize;
          this.form.Count = Count;
          this.table = List.map(v => {
            v.createdAt1 = this.$format.format(v.createdAt);
            return v;
          });
        }
        this.loading = false;
      });
    },
    dialogSub() {
      this.form.title = "";
      this.getList();
      this.dialog = false;
    },
    changeClassify(form, name) {
      this.tag = this[form].classify == "" ? [] : this.classify.find(v => v[name] == this[form].classify).tag;
      this[form].tag = null;
    },
    // tagFocus() {},
    dialogClose() {
      this.dialogForm = { tag: "" };
    },
    rowEdit(row) {
      let { classify, tag } = row;
      this.tag = this.classify.find(v => v._id == row.classify._id).tag;
      // let tags = [];
      // this.tag.find(v=>v._id==tag)
      // this.tag.forEach(v => {
      //   tag.forEach(val => {
      //     if (v._id == val._id) tags.push(val._id);
      //   });
      // });
      // .map(v => v._id);
      this.dialogForm = { ...row, classify: classify._id, tag: tag.map(v => v._id) };
      this.dialog = true;
    },
    rowDelete(_id) {
      this.$api.delete("/Document", { params: { _id } }).then(({ data }) => {
        if (data.Code == 200) {
          this.$message.success(data.Msg);
          this.getList();
        } else this.$message.error(data.Msg);
      });
    },
    Search() {
      this.form.PageIndex = 1;
      this.getList();
    },
    current({ value, Page }) {
      this.form[Page] = value;
      this.getList();
    },
    timeChange(val) {
      this.form.StartTime = val[0];
      this.form.EndTime = val[1];
    },
    selection() {},
    row() {},
  },
  mounted() {
    this.getList();
  },
};
</script>
